<template>
  <div ref="chartRef" class="chart-container" style="width: 500px; height: 280px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const chartRef = ref(null);
    let chartInstance = null;

    onMounted(() => {
      if (chartRef.value) {
        // 初始化ECharts实例
        chartInstance = echarts.init(chartRef.value);
        // 配置图表选项
        const option = {
          backgroundColor: '#0f2035',
          title: {
            text: '累计平均办理时长TOP5',
            left: '10px',
            top: '5px',
            textStyle: {
              color: '#fff',
              fontSize: 14,
              fontWeight: 'bold'
            },
            subtext: 'min',
            subtextStyle: {
              color: '#ccc',
              fontSize: 12,
              x: 10,
              y: 20
            }
          },
          grid: {
            left: '12%',
            right: '8%',
            top: '30%',
            bottom: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['事项A', '事项B', '事项C', '事项D', '事项E'],
            axisLine: {
              lineStyle: {
                color: '#6699cc'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#ccc',
              fontSize: 12
            }
          },
          yAxis: {
            type: 'value',
            max: 40,
            axisLine: {
              lineStyle: {
                color: '#6699cc'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#ccc',
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(102, 153, 204, 0.3)'
              }
            }
          },
          series: [
            {
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                color: (params) => {
                  const colors = ['#e53935', '#f59e0b', '#9370db', '#34d399', '#38bdf8'];
                  return colors[params.dataIndex];
                },
                borderRadius: [5, 5, 0, 0]
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: 12
              },
              data: [36, 27, 21, 14, 8]
            }
          ]
        };
        // 渲染图表
        chartInstance.setOption(option);
      }
    });

    onUnmounted(() => {
      if (chartInstance) {
        chartInstance.dispose();
      }
    });

    return {
      chartRef
    };
  }
};
</script>

<style scoped>
.chart-container {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(44, 90, 160, 0.3);
  box-sizing: border-box;
}
</style>